<template>
	<div class="mark-box" v-show="showPrivacy">
		<div class="content" :class="flagShow ? 'fadeIn' : 'fadeOut'">
			<div class="font-bold fontS32 pt-30">用户隐私保护提示</div>
			<div class="text mt-30">
				<div>在你使用 薪岗通 服务之前，请仔细阅读</div>
				<div @click="getView" class="color-blue">{{ privacyContractName }}</div>
				<div>如你同意该指引，请点击“同意”开始使用本小程序 。</div>
			</div>

			<!-- <div class="flex align-center">
			<image class="img-64" src="https://oss-prod.xtrip.vip/common/20230914CECDDU.jpg" mode=""></image>
			<div class="ml-16">薪岗通</div>
		</div>
		-->
			<div class="flex justify-around mt-80 ml-80 mr-80">
				<button class="btn-refuse" @click.stop="exitMiniProgram">拒绝</button>
				<button id="agree-btn" class="btn-agree" open-type="agreePrivacyAuthorization"
					@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
			</div>
		</div>
	</div>
</template>
<script>
import toolUtils from "@/utils/toolUtils.js";
export default {
	props: {
		show: {
			type: Boolean,
			default: false,
		},
		position: {
			type: String,
			default: "normal",
		},
		privacyContractName: {
			type: String,
			default: "《百宿说小程序隐私保护指引》",
		},
		closeBtn: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			flagShow: false,
			showPrivacy: false,
		};
	},
	watch: {
		show: {
			handler(val) {
				console.log(val)
				if (val) {
					this.flagShow = true;
					this.showPopup()
					// this.moveY = 0;
				}
			},
			immediate: true,
		},
	},
	created() {
		setTimeout(() => {
			this.showPrivacy = this.show;

		}, 500);
	},



	methods: {
		showPopup() {

			var animation = uni.createAnimation({
				duration: 350,
				timingFunction: 'ease',
			})
			this.animation = animation

			// this.animationData = animation.export()
			setTimeout(() => {
				animation.translateY(0).step()
				this.animationData = animation.export()
				console.log(this.moveY)

			}, 0)
		},

		closePopup() {
			this.flagShow = false;
			var animation = uni.createAnimation({
				duration: 350,
				timingFunction: 'ease',
			})
			this.animation = animation
			animation.translateY('100%').step()
			this.animationData = animation.export()
			setTimeout(() => {
				this.$emit("close");
			}, 400)
		},
		getView() {
			uni.openPrivacyContract({
				fail: () => {
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
				}
			})
		},
		// 同意隐私协议
		handleAgreePrivacyAuthorization() {
			console.log('点击同意')
			let that = this;
			uni.requirePrivacyAuthorize({
				success: res => {
					that.showPrivacy = false;
					this.closePopup()
					getApp().globalData.showPrivacy = false;

				}
			});
		},
		// 拒绝隐私协议
		exitMiniProgram() {
			const that = this;
			uni.showModal({
				content: '如果拒绝,我们将无法获取您的信息, 包括手机号、位置信息、相册等该小程序十分重要的功能,您确定要拒绝吗?',
				success: res => {
					if (res.confirm) {
						that.showPrivacy = false;
						uni.exitMiniProgram({
							success: () => {
								console.log('退出小程序成功');
							}
						});
					}
				}
			});
		},

	},
};
</script>
<style lang="scss" scoped>
.mark-box {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, .6);
	box-sizing: border-box;
	z-index: 99999999;
}

.content {
	position: fixed;
	width: 72%;
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	height: 540rpx;
	width: 100%;

	bottom: 0;
	padding: 36rpx;
	left: 0;

	margin: auto;

	.text {
		line-height: 44rpx;
		font-size: 26rpx;
		color: #898989;

	}

	.color-blue {
		color: #408EE7;
	}

	.btn-refuse {
		width: 45%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		color: #000;
		background: #F2F2F2;
		border-radius: 16rpx;

	}

	.btn-agree {
		width: 45%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		background: #6cbf6f;
		border-radius: 16rpx;
	}

	.fadeIn {
		animation: fadeIn .5s ease forwards;
	}

	.fadeOut {
		animation: fadeOut 0.5s ease forwards;
	}
}
</style>